<template>
  <div>
    <div class="item_box" :style="{height: isOpen ? 'auto' : '90px'}">
      <div class="pull-right updateTime">数据更新时间: {{ updateTime }}</div>
      <p class="title_1">工商信息</p>
      <el-form class="custom-form" :model="custInfo" label-width="180px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="custName">
              <el-input v-model="custInfo.custName" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户简称" prop="customerAbbreviation">
              <el-input v-model="custInfo.customerAbbreviation" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="历史名称" prop="historicalName">
              <el-input v-model="custInfo.historicalName" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="统一社会信用代码" prop="certNo">
              <el-input v-model="custInfo.certNo" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="组织机构代码" prop="orgNo">
              <el-input v-model="custInfo.orgNo" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工商注册号" prop="regNo">
              <el-input v-model="custInfo.regNo" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="社会组织类型" prop="orgType">
              <el-input v-model="custInfo.orgType" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="企业类型" prop="type">
              <el-input v-model="custInfo.type" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经营状态" prop="status">
              <el-input v-model="custInfo.status" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务主管单位" prop="mainUnit">
              <el-input v-model="custInfo.mainUnit" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成立日期" prop="establishTime">
              <el-input v-model="custInfo.establishTime" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经营期限" prop="operatingTerm">
              <el-input v-model="custInfo.operatingTerm" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="核准日期" prop="dateApproval">
              <el-input v-model="custInfo.dateApproval" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人类型" prop="typeLegalPerson">
              <el-input v-model="custInfo.typeLegalPerson" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记机关" prop="registrationAuth">
              <el-input v-model="custInfo.registrationAuth" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="从业人数" prop="NumEmployees">
              <el-input v-model="custInfo.NumEmployees" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="注册资本" prop="registeredCapital">
              <el-input v-model="custInfo.registeredCapital" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法定代表人" prop="legalRepresentative">
              <el-input v-model="custInfo.legalRepresentative" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法定代表人类型" prop="legalRepresentativeType">
              <el-input v-model="custInfo.legalRepresentativeType" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="公司代表人职务" prop="companyRepresentativePosition">
              <el-input v-model="custInfo.companyRepresentativePosition" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在省/市/区县" prop="city">
              <el-input v-model="custInfo.city" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册地址" prop="address">
              <el-input v-model="custInfo.address" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属行业" prop="industryAll">
              <el-input v-model="custInfo.industryAll" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="经营范围" prop="businessScope">
              <el-input v-model="custInfo.businessScope" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <DArrowRight style="width: 1.5em; height: 1.5em; margin-right: 8px; color: #3A71A8;" @click="switchBox" class="isOpen" :style="{transform: isOpen ? 'rotate(90deg)' : 'rotate(-90deg)'}"/>
    </div>
    <div class="item_box">
      <div class="pull-right updateTime">数据更新时间: {{ updateTime }}</div>
      <p class="title_1">主要人员信息</p>
      <el-row :gutter="20" class="mt10">
        <el-col :span="5" class="ml20">
          <el-card style="max-width: 480px">
            <h4 class="title_2 flex_c_c mb10">董事长</h4>
            <h2 class="flex_c_c text-success">张三</h2>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card style="max-width: 480px">
            <h4 class="title_2 flex_c_c mb10">总经理</h4>
            <h2 class="flex_c_c">李四</h2>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card style="max-width: 480px">
            <h4 class="title_2 flex_c_c mb10">监事</h4>
            <h2 class="flex_c_c">张三一</h2>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="item_box">
      <div class="pull-right updateTime">数据更新时间: {{ updateTime }}</div>
      <p class="title_1">地址\电话\邮箱信息</p>
      <el-row :gutter="20" class="mt20">
        <el-col :span="12" class="ml20">
          <el-descriptions :column="1">
            <el-descriptions-item label="地址区域代码">310100000000</el-descriptions-item>
            <el-descriptions-item label="详细地址">上海市徐汇区</el-descriptions-item>
            <el-descriptions-item label="邮政编码">3101000</el-descriptions-item>
            <el-descriptions-item label="官网地址">www.xxxxxx.com
              <el-button plain type="primary" size="small">查看全部</el-button>
            </el-descriptions-item>
            <el-descriptions-item label="公司邮箱">xxxxx@xxx.com
              <el-button plain type="primary" size="small">查看全部</el-button>
            </el-descriptions-item>
            <el-descriptions-item label="公司电话">00123123123
              <el-button plain type="primary" size="small">查看全部</el-button>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="8">
          <div>
            <!-- <aMap></aMap> -->
            <div>
              <img src="./map.jpg" alt="" style="width: 100%;">
            </div>
            <div class="flex_c_line mt10">
              <el-button plain type="primary" size="small">查看地图</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="item_box">
      <div class="pull-right updateTime">数据更新时间: {{ updateTime }}</div>
      <p class="title_1">银行账户信息</p>
      <div class="ml10 mr10 mt20">
        <el-table :data="tableList_1">
          <el-table-column label="银行账号" align="center" prop="account" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column label="客户税号" align="center" prop="dutyNo" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column label="受票方名称" align="center" prop="name" :show-overflow-tooltip="true"/>
          <el-table-column label="纳税人类型" align="center" prop="type" min-width="150" :show-overflow-tooltip="true"/>
        </el-table>
      </div>
    </div>
    <div class="item_box">
      <div class="pull-right updateTime">数据更新时间: {{ updateTime }}</div>
      <p class="title_1">行政许可信息</p>
      <div class="ml10 mr10 mt20">
        <el-table :data="tableList_2">
          <el-table-column label="序号" type="index" align="center" width="50" />
          <el-table-column label="许可文件编号" align="center" prop="fileNo" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column label="许可文件名称" align="center" prop="fileName" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column label="有效期自" align="center" prop="beginTime" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column label="有效期至" align="center" prop="endTime" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column label="许可机关" align="center" prop="licensingAuth" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column label="许可内容" align="center" prop="licensing" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column label="状态" align="center" prop="status" min-width="150" :show-overflow-tooltip="true"/>
        </el-table>
      </div>
    </div>
    <div class="item_box">
      <div class="pull-right updateTime">数据更新时间: {{ updateTime }}</div>
      <p class="title_1">别名信息</p>
      <div class="ml10 mr10 mt20">
        <el-table :data="tableList_3">
          <el-table-column label="序号" type="index" align="center" width="50" />
          <el-table-column label="别名名称" align="center" prop="custName" min-width="150" :show-overflow-tooltip="true">
            <template #default="scope">
              <span>{{ scope.row.custName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="time" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column label="创建人" align="center" prop="createName" :show-overflow-tooltip="true"/>
          <el-table-column label="状态" align="center" prop="status" min-width="150" :show-overflow-tooltip="true"/>
          <el-table-column label="失效时间" align="center" prop="InvalidTime" min-width="120" :show-overflow-tooltip="true"/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup name="baseInfo">
  import { inject, toRefs } from "vue"
  import aMap from "./map.vue"
  const { proxy } = getCurrentInstance()
  const router = useRouter()

  const tableList_1 = ref([])
  const tableList_2 = ref([])
  const tableList_3 = ref([])
  const activeName = ref('1')

  // const props = defineProps({
  //   custInfo: Object
  // })

  const custInfo = inject('custInfo')
  console.log(inject)
  console.log(provide)
  const updateTime = '2024.01.10'
  
  tableList_3.value = [
    {
      custName: '中国建筑工程有限公司',
      time: '2024-01-08',
      createName: '张三',
      status: '有效',
      InvalidTime: '-',
    },
    {
      custName: '中国建筑工程有限公司1',
      time: '2024-01-08',
      createName: '张三',
      status: '有效',
      InvalidTime: '-',
    },
    {
      custName: '中国建筑工程有限公司2',
      time: '2024-01-08',
      createName: '张三',
      status: '失效',
      InvalidTime: '2024-01-22',
    },
  ]
  tableList_2.value = [
    {
      fileNo: '120220120909',
      fileName: '许可文件-2022',
      beginTime: '2022-01-01',
      endTime: '2024-12-12',
      licensingAuth: 'XXXX',
      licensing: 'XXXXXX',
      status: '有效',
    },
    {
      fileNo: '120220121010',
      fileName: '许可文件-2024',
      beginTime: '2023-01-01',
      endTime: '2024-12-12',
      licensingAuth: 'XXXX',
      licensing: 'XXXXXX',
      status: '有效',
    },
  ]
  tableList_1.value = [
    {
      account: '12312312121212121212',
      dutyNo: 'QWERTYUIOP123456789',
      name: 'XXXXXX',
      type: 'XXXX',
    },
    {
      account: '12312312121212121212',
      dutyNo: 'QWERTYUIOP123456789',
      name: 'XXXXXX',
      type: 'XXXX',
    },
  ]
  const handleClick = (tab) => {

  }
  const isOpen = ref(true)
  function switchBox() {
    isOpen.value = !isOpen.value
  }
</script>

<style lang="scss" scoped>
.updateTime {
  color: gray;
  font-size: 14px;
}
.item_box {
  overflow: hidden;
  position: relative;
  transition: all .5s;
  .isOpen {
    position: absolute;
    bottom: 10px;
    right: 20px;
  }
}
</style>